<template>
  <div>
    <!-- 搜索区 -->
    <el-row :gutter="20" style="margin-bottom: 20px;">
      <el-col :span="6">
        <el-input
          placeholder="搜索项目名称"
          v-model="searchNameInput"
          clearable>
        </el-input>
      </el-col>
      <el-col :span="6">
        <el-select v-model="searchStatusInput" placeholder="选择状态" clearable style="width: 100%;">
          <el-option label="已通过" value="已通过"></el-option>
          <el-option label="未通过" value="未通过"></el-option>
          <el-option label="草稿" value="草稿"></el-option>
          <el-option label="审核中" value="审核中"></el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-input v-model="searchCompanyName" placeholder="请输入公司名称" clearable></el-input>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="handleSearch">
          <el-icon><Search /></el-icon> 搜索
        </el-button>
        <el-button @click="handleReset">
          <el-icon><Refresh /></el-icon> 重置
        </el-button>
      </el-col>
    </el-row>

    <!-- 项目显示区 -->
    <el-row :gutter="20">
      <el-col :span="6" v-for="project in filteredProjects.slice((currentPage - 1) * pageSize, currentPage * pageSize)" :key="project.id">
        <el-card class="project-card">
          <el-tag :type="getStatusType(project.status)" :effect="'dark'" class="status-tag">{{ project.status || '状态未知' }}</el-tag>
          <img v-if="project.cover" :src="project.cover" class="project-image" alt="project cover" @error="setDefaultImage($event)">
          <img v-else :src="defaultCover" class="project-image" alt="default image">
          <div class="card-content">
            <h3>{{ project.reportName || '未命名项目' }}</h3>
            <hr class="divider">
            <p class="description">{{ project.reportDescription || '无具体描述' }}</p>
            <div class="additional-info">
              <el-tag class="info-left">
                <el-icon><OfficeBuilding /></el-icon>
                <span>{{ project.companyName || '未知公司' }}</span>
              </el-tag>
              <el-tag class="info-right">
                <el-icon><Clock /></el-icon>
                <span>{{ project.evaluateTime || '未知时间' }}</span>
              </el-tag>
            </div>
            <el-button type="text" @click="navigateToDetails(project.id)">查看详情</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 分页 -->
    <el-pagination
      @current-change="handlePageChange"
      :current-page="currentPage"
      :page-size="pageSize"
      layout="prev, pager, next"
      :total="filteredProjects.length">
    </el-pagination>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue';
import ProjectReportManagementService from '../api/ProjectReportManagemnet';
import { useRouter } from 'vue-router';
import { OfficeBuilding, Clock, Search, Refresh } from '@element-plus/icons-vue';
import defaultCover from '../picture/cover.png'; // 默认图片

export default {
  name: 'ProjectGallery',
  components: {
    OfficeBuilding,
    Clock,
    Search,
    Refresh,
  },
  setup() {
    const currentPage = ref(1);
    const pageSize = ref(4);
    const projects = ref([]);
    const filteredProjects = ref([]); // 搜索结果
    const searchNameInput = ref('');
    const searchStatusInput = ref('');
    const searchCompanyName = ref('');
    const router = useRouter();

    // 获取项目数据
    const fetchProjects = async () => {
      try {
        const response = await ProjectReportManagementService.getAllProjectReports();
        projects.value = response.data;
        filteredProjects.value = response.data; // 初始化搜索结果
      } catch (error) {
        console.error('获取项目信息错误:', error);
      }
    };

    onMounted(() => {
      fetchProjects();
    });

    // 搜索按钮
    const handleSearch = () => {
      currentPage.value = 1; // 搜索时重置到第一页

      filteredProjects.value = projects.value.filter(project => {
        const matchesName = searchNameInput.value
          ? project.reportName.includes(searchNameInput.value)
          : true;

        const matchesStatus = searchStatusInput.value
          ? project.status === searchStatusInput.value
          : true;

        const matchesCompanyName = searchCompanyName.value
          ? project.companyName.includes(searchCompanyName.value)// 匹配日期开头部分
          : true;

        return matchesName && matchesStatus && matchesCompanyName;
      });
    };

    // 重置按钮
    const handleReset = () => {
      searchNameInput.value = '';
      searchStatusInput.value = '';
      searchCompanyName.value = '';
      filteredProjects.value = projects.value; // 重置搜索结果为所有项目
      currentPage.value = 1;
    };

    // 分页
    const handlePageChange = (newPage) => {
      currentPage.value = newPage;
    };

    // 设置状态标签类型
    const getStatusType = (status) => {
      if (status === '未通过') return 'danger';
      if (status === '已通过') return 'success';
      if (status === '已审核') return 'warning';
      if (status === '审核中') return 'primary';
      return 'info';
    };

    // 默认图片
    const setDefaultImage = (event) => {
      event.target.src = defaultCover;
    };

    // 跳转至详情页
    const navigateToDetails = (id) => {
      router.push({ name: 'ProjectDetails', params: { projectId: id } });
    };

    return {
      currentPage,
      pageSize,
      projects,
      filteredProjects,
      searchNameInput,
      searchStatusInput,
      searchCompanyName,
      handleSearch,
      handleReset,
      handlePageChange,
      getStatusType,
      setDefaultImage,
      navigateToDetails,
      defaultCover,
    };
  },
};
</script>


<style scoped>
.project-card {
  position: relative;
  width: 300px;
  height: 400px;
  display: flex;
  flex-direction: column;
  border: 1px solid #ebebeb;
  border-radius: 10px;
  background: linear-gradient(135deg, #ffe8ed, #def4fb);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  padding: 0;
}

.project-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 25vh;
  object-fit: cover;
  z-index: 1;
}

.status-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}

.card-content {
  position: absolute;
  top: 180px;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 15px;
  display: flex;
  flex-direction: column;
  background-color: transparent;
  z-index: 3;
}

h3 {
  margin: 0;
  height: 50px;
  line-height: 50px;
  font-family: 'Cursive', sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, #FFD1DC 0%, #87CEFA 50%, #FFD1DC 100%);
  margin: 0;
}

.description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 54px;
  line-height: 18px;
}

.additional-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  margin-top: 10px;
}

.info-left, .info-right {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px;
  border-radius: 10px;
  font-weight: bold;
}

.info-left {
  background-color: #ebf8e1;
  color: #32CD32;
}

.info-right {
  background-color: #fcebeb;
  color: #FF6347;
}

.el-icon {
  font-size: 14px;
  margin-right: 5px;
}

.el-button {
  height: 32px;
  border-radius: 5px;
}
</style>






